<template>
  <div>
    <el-container>
      <el-header>高校疫情打卡</el-header>
      <el-main>
          <el-form :model="stForm" status-icon ref="stForm" class="demo-ruleForm" :rules="rules">
            <el-form-item  prop="username">
              <el-input type="username" name="username" v-model="stForm.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" name="password" v-model="stForm.password" autocomplete="off"  placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button id="TencentCaptcha" data-appid="2064699032" data-cbfn="callback" type="primary">登录</el-button>
            </el-form-item>
          </el-form>
        </el-main>
    </el-container>

  </div>
</template>

<script>
  var vue_self;
    export default {
        data(){
          return{
            aclock: null,
            stForm: {
              username: null,
              password: null,
            },
            rules:{
              username: [
                {required: true, message: '请输入用户名', trigger: 'blur'},
              ],
              password: [
                {required: true, message: '请输入密码', trigger: 'blur'},
              ],
            },
          };
        },
      created() {
        if (window.TencentCaptcha === undefined) {
          let script = document.createElement('script');
          let head = document.getElementsByTagName('head')[0];
          script.type = 'text/javascript';
          script.src = 'https://ssl.captcha.qq.com/TCaptcha.js';
          head.appendChild(script);
        }
        vue_self = this;
        window.callback = function (res) {
          if (res.ret === 0){
            vue_self.verify(res);
          }
        }
      },
      methods: {
        verify: function(res){
          let Data = JSON.stringify({"ticket": res.ticket, "randstr": res.randstr});
          this.$axios({
            method: 'post',
            url: '/check',
            headers: {
              "Content-Type": "application/json",
            },
            data: Data,
          }).then((response)=>{
            if(response.data === 1){
              vue_self.into();
            }else{
              window.alert("验证失败!");
            }
          });
        },
        into: function(){
          vue_self.$axios.get('/account/aclock',{
            params: {
              id: this.stForm.username,
            }}).then((response)=>{
              this.aclock = response.data;
              if(this.aclock === 1){
                window.alert("错误次数过多，账号被锁定");
              }else{
              let formData = new FormData();
              for(var key in this.stForm){
                formData.append(key,this.stForm[key]);
              }
              vue_self.$axios({
                method: 'post',
                url: '/login',
                headers: {
                  "Content-Type": "multipart/form-data"
                },
                data: formData,
              }).then((res)=>{
                if(res.data === "ROLE_USER"){
                  vue_self.users();
                }else if(res.data === "error"){
                  window.alert("用户名或密码错误");
                }else if(res.data === "ROLE_ADMIN"){
                  vue_self.admin();
                }
              });
            }
          });
        },
        admin: function(){
          sessionStorage.setItem("id",this.stForm.username);
          this.$router.push("/admin");
        },
        users: function(){
          sessionStorage.setItem("id",this.stForm.username);
          this.$router.push("/user")
        },
      }
    }
</script>

<style scoped>

  .el-container{
    background-color: ivory;
  }

  .el-header {
    text-align: center;
    font-size: 30px;
    color: #00aa88;
    line-height: 60px;
  }

  .el-main {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 95px auto;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    text-align: center;
    line-height: 160px;
    width: 35%;
    align-self: center;
  }


</style>
